<template>
  <div class="auth-container">
    <el-card class="auth-card analytics-card">
      <template #header>
        <div class="card-header">
          <h2>成长数据分析</h2>
          <p class="subtitle">最近的记录趋势与心情分布</p>
        </div>
      </template>

      <el-row :gutter="16">
        <el-col :xs="24" :md="12">
          <el-card class="panel" shadow="never">
            <div class="panel-title">本周记录数</div>
            <div class="panel-num">7</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :md="12">
          <el-card class="panel" shadow="never">
            <div class="panel-title">连续天数</div>
            <div class="panel-num">5</div>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="chart" shadow="never">
        <div class="chart-placeholder">图表占位（可接入 ECharts/Chart.js）</div>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 预留图表数据与接入点
</script>

<style scoped>
.analytics-card { max-width: 1000px; margin: 40px auto; }
.subtitle { margin: 6px 0 0; font-size: 14px; color: #8a6f5b; }
.panel { background: #fffaf6; text-align: center; }
.panel-title { color: #6b4f3a; font-weight: 500; }
.panel-num { font-size: 36px; color: #3d2b20; font-weight: 700; }
.chart { margin-top: 16px; background: #fffaf6; }
.chart-placeholder { height: 240px; display:flex; align-items:center; justify-content:center; color:#8a6f5b; }
</style>